<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="lib/bootstrap-switch.min.css" />
<link rel="stylesheet" href="lib/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="lib/bootstrap-select.min.css" />

<script src="lib/reconnecting-websocket.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/bootstrap-switch.min.js"></script>
<script src="lib/moment.js"></script>
<script src="lib/bootstrap-datetimepicker.min.js"></script>
<script src="lib/bootstrap-select.min.js"></script>
<script src="lib/bootbox.min.js"></script>


<title>控制台</title>
</head>
<body>
	<div class="container-fluid">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse"
							data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span> <span
								class="icon-bar"></span> <span class="icon-bar"></span> <span
								class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="#"> <span
							class="glyphicon glyphicon-cloud" aria-hidden="true"></span> <strong>文件同步器</strong>
						</a>
					</div>

					<div class="collapse navbar-collapse"
						id="bs-example-navbar-collapse-1">
						<form class="navbar-form navbar-left" role="search">
							<div class="form-group">
								<input type="text" class="form-control syncTime"
									placeholder="文件修改时间(之后)" /> <select
									class="selectpicker listeners">
									<option value="">所有监听目录</option>
								</select> <select class="selectpicker syncers">
									<option value="">所有同步目标</option>
								</select>
								<button type="button" class="btn btn-primary syncBtn"
									data-loading-text="Loading...">
									<span class="glyphicon glyphicon-level-up" aria-hidden="true">
										同步</span>
								</button>
								<button type="button" class="btn btn-danger clearBtn"
									data-loading-text="Loading...">
									<span class="glyphicon glyphicon-floppy-remove"
										aria-hidden="true"> 清空</span>
								</button>
							</div>
						</form>
						<ul class="nav navbar-nav navbar-right">
							<li class="active"><a href="#" class="clearScreen">清屏</a></li>
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								data-toggle="dropdown">帮助<strong class="caret"></strong></a>
								<ul class="dropdown-menu">
									<li><a href="#">使用手册</a></li>
									<li class="divider"></li>
									<li><a href="#">关于</a></li>
								</ul></li>
						</ul>
					</div>
				</nav>
				
				<div class="table-responsive " style="margin-top: 50px">
					<table class="table table-hover table-condensed">
						<tbody class="logbody">
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div class="temp" style="visibility: hidden;">
		<table>
			<tr class="logtr">
				<td></td>
			</tr>
		</table>
	</div>

</body>

<script>
$(function() {
	var g_index = {};
	bootbox.setLocale("zh_CN");

	function Websocket(){
		window.WebSocket = window.WebSocket || window.MozWebSocket;
		if (!window.WebSocket){
			alert("浏览器不支持websocket，无法使用web ui\n\n推荐使用chrome");
			return;
		}
		var wsurl = "ws://"+window.location.hostname+":"+window.location.port+"/websocket/test";
		var ws = new ReconnectingWebSocket(wsurl);
		ws.onopen = function() {
		};
		ws.onmessage = function(message) {
			var $tr = $(".temp .logtr").clone();
			$tr.find("td").text(message.data);
			$(".table").append($tr);
			$('body').scrollTop($('body').height());
		};
		function send(message) {
			ws.send(message);
		}
		return {
			"send" : send
		}
	}
	var ws = Websocket();
	$(".syncing").bootstrapSwitch();
	$(".syncTime").datetimepicker({
		format : 'YYYY-MM-DD HH:mm:ss'
	});
	$(".syncTimeBtn").on('click', function() {
		alert("未实现");
	})
	$(".syncBtn").click(function() {
		bootbox.confirm({
			title : "警告",
			message : "文件即将同步到目标目录",
			callback : function(result) {
				if (result) {
					var $btn = $(this).button('loading');
					$.ajax({
						"url" : "/request/Operate/sync",
						"data" : {
							"time" : $(".syncTime").val(),
							"listener" : $("select.listeners").val(),
							"syncer" : $("select.syncers").val()
						},
						"success" : function() {
							$btn.button('reset');
						},
						"error" : function() {
							$btn.button('reset');
						}
					});
				}
			}
		});

	})

	$(".clearBtn").click(function() {
		bootbox.confirm({
			title : "警告",
			message : "目标目录即将被清空",
			callback : function(result) {
				if (result) {
					var $btn = $(this).button('loading');
					$.ajax({
						"url" : "/request/Operate/clear",
						"data" : {
							"listener" : $("select.listeners").val(),
							"syncer" : $("select.syncers").val()
						},
						"success" : function() {
							$btn.button('reset');
						},
						"error" : function() {
							$btn.button('reset');
						}
					});
				}
			}
		});

	})

	$("select.listeners").change(
			function() {
				$("select.syncers option:not(:first)").remove();
				var val = $(this).val();
				if (val != "") {
					$.each(g_index.pairs, function(index, monitor) {
						if (monitor.id == val) {
							$.each(g_index.pairs[index].engines, function(
									index, engine) {
								$("<option></option>")
										.attr("value", engine).text(engine)
										.appendTo($("select.syncers"));
							});
							return false;
						}
					});
				}
				$("select.syncers").val("").selectpicker('refresh');
			});
	$(".clearScreen").click(function(){
		$(".table").empty();
	});
	$.ajax({
		"url" : "/request/Query/index",
		"dataType" : "json",
		"success" : function(msg) {
			g_index = msg.data;
			$("select.listeners option:not(:first)").remove();
			$("syncers.listeners option:not(:first)").remove();
			$.each(g_index.pairs, function(index, monitor) {
				$("<option></option>").attr("value", monitor.id).text(
						monitor.id).appendTo($("select.listeners"));
			})
			$("select.listeners").selectpicker('refresh');
		}
	});

});
</script>

</html>